import React from 'react';
import { useParams, useLocation } from 'react-router-dom';

const MarketAnalysis = () => {
  const { subpage } = useParams();
  const location = useLocation();
  
  // 如果没有二级页面参数，使用默认值
  const currentSubpage = subpage || 'trend';
  
  const getPageTitle = () => {
    switch(currentSubpage) {
      case 'trend': return '市场趋势';
      case 'sector': return '行业分析';
      case 'comparison': return '对标分析';
      case 'valuation': return '估值模型';
      default: return '市场分析';
    }
  };
  
  const getPageContent = () => {
    switch(currentSubpage) {
      case 'trend':
        return (
          <div className="page-content">
            <h3>市场趋势分析</h3>
            <p>展示市场整体趋势图表和相关数据分析...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>市场趋势图表</p>
            </div>
          </div>
        );
      case 'sector':
        return (
          <div className="page-content">
            <h3>行业分析</h3>
            <p>各行业表现对比和详细分析...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>行业分析图表</p>
            </div>
          </div>
        );
      case 'comparison':
        return (
          <div className="page-content">
            <h3>对标分析</h3>
            <p>不同资产、公司或策略之间的对比分析...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>对标分析图表</p>
            </div>
          </div>
        );
      case 'valuation':
        return (
          <div className="page-content">
            <h3>估值模型</h3>
            <p>使用各种估值方法评估资产价值...</p>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>估值模型图表</p>
            </div>
          </div>
        );
      default:
        return <p>请从左侧选择分析类型</p>;
    }
  };

  return (
    <div className="page-container">
      <h2>{getPageTitle()}</h2>
      {getPageContent()}
    </div>
  );
};

export default MarketAnalysis;